<template>
	<view class="container">
		<view class="header">
			<navSearchBar title="一键生成PPT"></navSearchBar>
			<view class="step">
				<view class="step-item" v-for="(item,index) in stepName" :key="index">
					<view :class="['name',activeStep >= index ?'active':'']">{{item.name}}</view>
					<view :class="['circle',activeStep >= index ?'active':'']"></view>
					<view v-if="index < stepName.length-1" :class="['line',activeStep > index ? 'active' : '']"></view>
				</view>
			</view>
		</view>

		<view class="content">
			<ppt v-if="activeStep == 0" :current="ppt" @changePpt="changePpt"></ppt>
			<theme v-else-if="activeStep == 1" :theme="theme" @changeTheme="changeTheme"></theme>
			<summarize v-else-if="activeStep == 2" :summa="summa" :summa2="summa2" @changeSumma="changeSumma"  @changeSummaTwo="changeSummaTwo"></summarize>
			<introduce v-else-if="activeStep == 3"  @addIntroduce="addIntroduce" @getIntroduceList="getIntroduceList"></introduce>
			<about v-else></about>
		</view>
		<view class="step-btn flex-col-center">
			<button class="step-up form-btn" v-if="activeStep > 0 && activeStep<stepName.length" @click="handleUp">上一步</button>
			<!-- <button class="step-up form-btn" v-if="activeStep == 4" @click="handleCancle">取消</button> -->
			<button class="form-btn" v-if="activeStep <stepName.length - 1" @click="handleNext">下一步</button>
			<button class="form-btn" :disabled="disabled" v-if="activeStep == stepName.length -1" @click="handleNext">下载ppt</button>
		</view>
		<!-- <tn-modal v-model="fileTipShow" title="提示" :content="content" :button="button" showCloseBtn @click="modalClick"></tn-modal> -->
	</view>
</template>

<script>
	import ppt from "./components/ppt.vue"
	import theme from "./components/theme.vue";
	import summarize from "./components/summarize.vue"
	import introduce from "./components/introduce.vue"
	import about from "./components/about.vue"
	import { fileExist,fileMkdir,fileSave } from "@/common/util/util";
	export default {
		components: {
			ppt,
			theme,
			summarize,
			introduce,
			about
		},
		data() {
			return {
				content:'wxfile://tmp_8676fe33030d57aecc0e38f8af3862e0af082fea6786edf101cc88c0eb8a62d6.pptx',
				 button: [{
					text: '我知道了',
					backgroundColor: '#CACACA',
					fontColor: '#000000',
					fontSize:'24',
					plain: true,
					shape: ''
				  },
				  {
					text: '打开文件',
					backgroundColor: '#FFA457',
					fontColor: '#FFFFFF',
					fontSize:'32',
					shape: ''
				  }
				],
				fileTipShow:false,
				activeStep: 0,
				stepName: [{
						name: "模板选择"
					},
					{
						name: "活动主题"
					},
					{
						name: "活动概述"
					},
					{
						name: "行程介绍"
					},
					{
						name: "关于我们"
					},
				],
				ppt: 1,
				theme: "",
				summa: "",
				summa2: "",
				introduce: [],
				disabled:false,
			};
		},
		methods: {
			changePpt(val) {
				this.ppt = val
			},
			changeTheme(val) {
				this.theme = val
				console.log(this.theme, "change")
			},
			changeSumma(val) {
				this.summa = val
				console.log(this.summa, "change")
			},
			changeSummaTwo(val) {
				this.summa2 = val
				console.log(this.summa, "change")
			},
			getIntroduceList(list){
				this.introduce = list.map((el) => el.product.id)
			},
			addIntroduce(val) {
				let index = this.introduce.indexOf(val)
				if (index < 0) {
					this.introduce.push(val)
				} else {
					this.introduce.splice(index, 1)
				}
				console.log(this.introduce, "this.introduce")
			},
			handleUp() {
				this.activeStep--
				console.log(this.activeStep, this.theme, "up")
			},
			
			async handleNext() {
				if(this.ppt == "" && this.activeStep == 0)return this.$tip.toast("请选择模板")
				if(this.theme == "" && this.activeStep == 1)return this.$tip.toast("请输入活动主题")
				if(this.summa == "" && this.activeStep == 2)return this.$tip.toast("请输入活动概述")
				// if(this.summa == "" && this.activeStep == 3)return this.$tip.toast("请输入活动概述")
				if(!this.introduce.length && this.activeStep == 3)return this.$tip.toast("请选择行程")
				console.log(1111111,this.introduce,this.activeStep)
				if(this.activeStep == this.stepName.length -1) {
					let par = {
						template_id:this.ppt,
						theme:this.theme,
						description:this.summa,
						description2:this.summa2,
						product_id:this.introduce
					}
					this.$tip.loading('ppt生成中')
					let res = await this.$api.createPpt(par)
					
					this.$tip.loaded();
					if(res.data.status == 200) {
						
						this.$tip.loading('ppt下载中')
						// this.$tip.success("PPT生成成功")
						let url = res.data.data;
						
						
					    console.log('开始下载',url)
						this.$http.download(url).then(async (res) => {
							this.$tip.loaded();
							this.disabled = true;
							console.log('下载',res,wx.env.USER_DATA_PATH)
							//预览和下载
							  let fileType =url.split('').reverse().join('').split('.').shift().split('').reverse().join('').toLowerCase();
							  const filePath = res.tempFilePath  // 临时文件路径
							  wx.openDocument({
								 filePath: filePath,
								 fileType,
								 showMenu: true ,// 预览文件右上方的...
								 success: (sus) => {
								   console.log('成功打开', sus,fileType);  
								 },
								 fail:(res)=> {
								 	console.log('失败', res,fileType);  
								 }
							  })
						})  
							
							 // // 设置存储路径
								// 	const timeStamp =new Date().getTime();
							 //        let myPath = wx.env.USER_DATA_PATH + '/qutuanjian'
								// 	let filename = myPath +'/'+timeStamp+'.pptx';
							 //        try {
							 //          // 判断文件夹是否存在
							 //          let isExist = await fileExist(myPath)
								// 	  console.log('cunzai',isExist)
							 //          // 存在: 保存文件到本地
							 //          let fileData = await fileSave(res.tempFilePath, filename).catch(err => console.log('1 c存储'+err));
								// 	  console.log('cun进去了',fileData)
								// 	   this.fileTipShow = true;
								// 	   this.content = '文件已保存：'+ fileData.savedFilePath.replace(wx.env.USER_DATA_PATH,'/Android/data/com.tencent.mm/MicroMsg/wxanewfiles/xxxx')
									   
								// 	   this.downloadPath = fileData.savedFilePath
							 //          // wx.showToast({
							 //          //   title: '保存成功',
							 //          //   icon: 'none'
							 //          // })
							 //        } catch (e) {
								// 		console.log('bucunzai',e)
							 //          // 不存在： 创建文件夹
							 //          await fileMkdir(myPath).catch(err => console.log(err));
							 //          // 保存文件到本地
							 //           let fileData = await fileSave(res.tempFilePath, filename).catch(err => console.log('2 存储'+err));
								// 	   console.log('cun进去了2',fileData)
								// 	   this.downloadPath =  fileData.savedFilePath
								// 	   this.fileTipShow = true;
								// 	   this.content = '文件已保存：'+ fileData.savedFilePath.replace(wx.env.USER_DATA_PATH,'/Android/data/com.tencent.mm/MicroMsg/wxanewfiles/xxxx')
									  
							 //          // wx.showToast({
							 //          //   title: '保存成功',
							 //          //   icon: 'none'
							 //          // })
							 //        }
							
						
						
						
					}
				}else{
					this.activeStep++
				}
				
			},
			download(){
				
			},
			modalClick({index}) {
				console.log('index',index)
				
				if(index == 0) {
					this.fileTipShow = false;
					// this.$Router.back(1)
				} else {
					  uni.openDocument({  
						filePath: this.downloadPath, 
						showMenu: true,
						success: (sus) => {  
						  console.log('成功打开', sus);  
						},  
					  });  
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.step {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 70rpx 44rpx;
		border-bottom: 2rpx solid #EFEFEF;

		.step-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
		}

		.name {
			font-size: 28rpx;
			line-height: 28rpx;
			font-weight: $Semibold;
			color: #6F6F6F;
			margin-bottom: 20rpx;
			// position: relative;
		}

		.name.active {
			color: #6880FF;
		}

		.circle {
			width: 40rpx;
			height: 40rpx;
			border: 6rpx solid #ECECEC;
			border-radius: 50%;
			background: #ECECEC;
			position: relative;
		}

		.circle.active {
			background: #6880FF;
		}

		.line {
			flex: 1;
			position: absolute;
			bottom: 16rpx;
			left: 50%;
			z-index: -1;
			width: 100%;
			height: 8rpx;
			background: linear-gradient(to right, #ECECEC 0, #ECECEC 100%);
		}

		.line.active {
			z-index: 1;
			background: linear-gradient(to right, #6880FF 0, #6880FF 100%);
		}
	}

	.content {
		flex: 1;
		height: 100%;
		margin-top: 60rpx;
		padding: 0 30rpx;
		padding-bottom: 152rpx;
		overflow: hidden;
	}

	.step-btn {
		--btn-width: 280rpx;
		width: 100%;
		height: 152rpx;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;

		.step-up {
			margin-right: auto;
			background: #FFFFFF !important;
			border: 2rpx solid #7D7D7D;
			color: #7D7D7D;
		}
	}
	/deep/.tn-modal__box__content{
		word-wrap: break-word;
		word-break: break-all;
		
	}
</style>